<template>
    <div class="box">
        <grid :cols="3">   
            <grid-item v-for="(item,index) in list" :key="item.money" class="center item"  @click.native="modify(item,index)">
                <span class="money">{{item.money}}</span>    
                <span class="date">{{item.date}}</span>   
            </grid-item>
        </grid> 
        <grid v-if="list.length===0">
            <grid-item class="center">
                <span style="color:red">
                    当前没有任何存储！
                </span>    
            </grid-item>    
        </grid>  
    </div>
</template>
<script>
import { Grid, GridItem } from "vux";
export default {
  components: {
    Grid,
    GridItem
  },

  props: {
    list: {
      type: Array,
      required: true
    },
    saved:{
        type:Array,
        required:true
    },
    saving:{
        type:Array,
        required:true
    }
  },
  methods: {
      modify(item,index){
          //根据时间修改金额
          let _this = this;
          let omoney = item.money;
          this.$vux.confirm.prompt(item.money,{
              title:'修改金额',
              onConfirm(money){
                  if(money === item.money || !money){
                      return;
                  }
                  //判断该金额是否已经存在
                  for(var i=0;i<_this.saved.length;i++){
                      if(_this.saved[i].money===money){
                          _this.$vux.toast.show({
                              type:'text',
                              text:'当前金额已经存过啦！',
                              position:'middle'
                          });
                          return false;
                      }
                  }
                _this.saved[index].money = money;
                _this.$vux.toast.show({
                    type:'text',
                    text:'修改成功!',
                    position:'middle'
                });
                //修改成功，需要修改未修改的金额
                _this.saving.remove(Number(item.money));
                //插入之前已存过的金额，按顺序排列
                for(var i=0;i<_this.saving.length;i++){
                    if(omoney<_this.saving[i]){
                        _this.saving.insert(i,Number(omoney));
                        break;
                    }
                }
              }
          });  
      }
  }
};
</script>
<style scoped lang="less">
.item{
    background: transparent;
    & span{
        
        font-weight: 800;
    }
}
.center{
    text-align: center;
}
.money{
    display: block;
    font-size: 20px;
    color: rebeccapurple;
}
.date{
    display: inline;
    font-size: 10px;
    color:gray;
}
</style>
